<template>
	<view class="content">
		<view class="register_gif">
			<image style="width:100%; height:100%;"
				src="https://img.zcool.cn/community/01e8985ef31d5ea8012066212846ed.gif" mode=""></image>
		</view>
		<h2 class="register_h3">欢迎注册</h2>
		<view class="register_inp">
			<uni-forms ref="formData" :modelValue="formData" :rules="rules">
				<uni-forms-item required name="webname">
					<uni-easyinput type="text" prefixIcon="phone" v-model="formData.webname" placeholder="请输入用户名"
						@input="checkInputAndCheckbox">
					</uni-easyinput>
				</uni-forms-item>
				<uni-forms-item required name="iphone">
					<uni-easyinput type="number" maxlength="11" prefixIcon="phone" v-model="formData.iphone"
						placeholder="请输入手机号" @input="checkInputAndCheckbox">
					</uni-easyinput>
				</uni-forms-item>
				<uni-forms-item required name="pwd">
					<uni-easyinput type="pwd" prefixIcon="locked" v-model="formData.pwd" placeholder="请输入密码"
						@input="checkInputAndCheckbox">
					</uni-easyinput>
				</uni-forms-item>
			</uni-forms>
			<button @click="submitForm('formData')" :class="btn_gronud" :disabled="isButtonDisabledComputed">注册</button>
		</view>
		<view class="register_read">
			<checkbox :checked="che" @click="Checkboxclick" />
			<view class="registerread_text">
				<text>我已阅读并同意 <a href="https://gitee.com/enterprise-terms" rel="noopener noreferrer"><text
							class="register_text">使用条款、隐私政策</text></a> 和
					<a href="https://ems.zzgoodqc.cn/%E5%B8%AD%E6%B6%A6%E8%AF%A6/h5/#/pages/policy/policy"
						rel="noopener noreferrer"><text class="register_text">使用规范</text></a></text>
			</view>
		</view>
		<view class="register_p" @click="register">
			已有账号去登录。
		</view>
	</view>
</template>

<script>
	import {
		webresinfo
	} from "../../wxapi/main.js"
	export default {
		data() {
			return {
				//按钮根据状态变颜色
				btn_gronud: "btn_gronud",
				// 选项按钮初始化状态
				che: false,
				//表单数据
				formData: {
					webname: '',
					iphone: '',
					pwd: '',
				},
				// 按钮状态
				isButtonDisabled: false,
				// 验证表单
				rules: {
					webname: {
						rules: [{
							required: true,
							errorMessage: '用户名不能为空'
						}]
					},
					iphone: {
						rules: [{
								required: true,
								errorMessage: '手机号不能为空'
							},
							{
								// 使用正则表达式验证手机号长度为11位且均为数字
								pattern: /^1\d{10}$/,
								errorMessage: '手机号必须为11位数字'
							}
						]
					},
					pwd: {
						rules: [{
								required: true,
								errorMessage: '密码不能为空'
							},
							{
								// 假设原本的意图是检查密码是否全为数字，但根据常规密码策略这可能不太合理，
								// 通常密码会包含字母和数字等。这里仅按原需求展示，如需调整请告知。
								format: 'number',
								errorMessage: '密码只能输入数字'
							}
						]
					}
				}
			}
		},
		computed: {
			isButtonDisabledComputed() {
				// 计算属性根据formData和che的当前状态返回true或false
				return !(this.formData.webname && this.formData.iphone && this.formData.pwd && this.che);
			},
		},
		methods: {
			// RehInfo(data) {
			// 	webresinfo(data).then(res => {
			// 		console.log(res);
			// 	})
			// },
			register() {
				uni.navigateTo({
					url: "/"
				})
			},
			checkInputAndCheckbox() {
				// 调用计算属性的依赖，以触发它的更新
				// 注意：这里直接使用计算属性的逻辑，无需额外操作
			},
			Checkboxclick() {
				this.che = !this.che;
				this.checkInputAndCheckbox(); // 调用此方法以确保按钮状态根据输入和Checkbox更新

				// 检查按钮是否可用，如果可用则改变btn_gronud的值
				if (!this.isButtonDisabledComputed) {
					this.btn_gronud = "btn_gronudtwo";
				} else {
					// 如果按钮应该被禁用，根据需要可以恢复原来的样式或做其他处理
					// 这里假设不需要特别处理，所以可以省略
				}
			},
			submitForm(ref) {
				this.$refs[ref].validate().then(res => {
					console.log('success', res);
					webresinfo(this.formData).then(res => {
						console.log(res);
						if (res.code == 0) {
							uni.showToast({
								title: `注册成功`,
								icon: 'none',
								duration: 800,
							})
							uni.switchTab({
								url:`/pages/home/home`
							})
						} else {
							uni.showToast({
								title: '校验失败，请检查输入',
								icon: 'none'
							});
						}
					})
				}).catch(err => {
					console.log('err', err);
					// 验证失败，根据需要可以提示用户错误信息或保持按钮禁用状态直到用户修正错误
					// 这里示例中保持按钮禁用，实际可以根据错误情况灵活处理
					uni.showToast({
						title: '校验失败，请检查输入',
						icon: 'none'
					});
				})
			},
		}
	}
</script>

<style scoped>
	a {
		text-decoration: none;
	}

	.btn_gronud {
		background-color: #9abdfd !important;
		color: #fff !important;
	}

	.btn_gronudtwo {
		background-color: #5679fb !important;
		color: #fff !important;
	}

	.registerread_text {
		margin-top: 10rpx;
	}

	.register_p {
		text-align: center;
		color: #5679fb;
	}

	.register_read {
		margin-top: 20rpx;
		margin-bottom: 20rpx;
		font-size: 26rpx;
		text-align: center;
		display: flex;
		justify-content: space-around;
	}

	.register_text {
		color: #55a0fc;
	}

	.register_h3 {
		box-sizing: border-box;
		margin: 20rpx;
	}

	.register_gif {
		width: 100%;
		height: 540rpx;
		margin: 0 auto;
	}

	.content {
		width: 100%;
		height: 1334rpx;
		padding: 20rpx;
		box-sizing: border-box;
	}
</style>